<template>
  <t-dialog
      header="新增任务"
      :visible.sync="showDialogAdd"
      @confirm="onConfirm"
      width='50%'
    >
    <t-space size="32px">
    <t-form
      :data="formData"
      labelWidth="calc(2em + 100px)"
      labelAlign="right"
      Align="right"
      :rules="formRules"
      :layout="layout"
      ref="form"
      scrollToFirstError="smooth"
    >
      <t-form-item label="任务名称" name="task_name">
        <t-input v-model="formData.task_name" placeholder="请输入任务名称" ></t-input>
      </t-form-item>
      <!-- <t-form-item label="链名称" name="chain_name">
        <t-input v-model="formData.chain_name"  placeholder="请输入链名称"></t-input>
      </t-form-item> -->
      <t-form-item label="链名称" name="chain_name">
        <t-select
          v-model="formData.chain_name"
          :style="{ width: '222px' }"
          class="demo-select-base"
          placeholder="请选择类型"
          clearable
        >
          <t-option v-for="(item, index) in CHAIN_NAME_OPTIONS" :key="index + item.path" :value="item.value" :label="item.label">
            {{ item.label }}
          </t-option>
        </t-select>
      </t-form-item>
      <t-form-item label="测试计划名" name="testplan_name" layout="inline">
        <t-select
          v-model="formData.testplan_name"
          :style="{ width: '222px' }"
          placeholder="请选择类型"
          class="demo-select-base"
          clearable
        >
          <t-option v-for="(item, index) in TESTPLAN_NAME_OPTIONS" :key="index + item.path" :value="item.value" :label="item.label">
            {{ item.label }}
          </t-option>
        </t-select>
      </t-form-item>
      <t-form-item label="代理服务名" name="agent_name" layout="inline">
        <t-select
          v-model="formData.agent_name"
          :style="{ width: '222px' }"
          placeholder="请选择类型"
          class="demo-select-base"
          clearable
        >
          <t-option v-for="(item, index) in AGENT_NAME_OPTIONS" :key="index + item.path" :value="item.value" :label="item.label">
            {{ item.label }}
          </t-option>
        </t-select>
      </t-form-item>
      <t-form-item label="注册服务" name="service" layout="inline">
        <t-select
          v-model="formData.service"
          :style="{ width: '222px' }"
          placeholder="请选择类型"
          class="demo-select-base"
          clearable
        >
          <t-option v-for="(item, index) in SERVICE_NAME_OPTIONS" :key="index + item.path" :value="item.value" :label="item.label">
            {{ item.label }}
          </t-option>
        </t-select>
      </t-form-item>
      <t-form-item 
      label="开始采集时间" 
      name="start_time" 
      layout="inline"
      >
      <t-date-picker
          placeholder="请输入时间"
          enable-time-picker
          v-model="formData.start_time"
          :disable-date="{ before: dayjs().subtract(1, 'day').format() }"
          :time-picker-props="timePickerProps"
          @pick="(date) => (pickDate = dayjs(date).format('YYYY-MM-DD'))"
        />
      </t-form-item>
      <t-form-item 
      label="结束采集时间" 
      name="finish_time" 
      layout="inline"
      >
      <t-date-picker
          placeholder="请输入时间"
          enable-time-picker
          v-model="formData.finish_time"
          :disable-date="{ before: dayjs().subtract(1, 'day').format() }"
          :time-picker-props="timePickerProps"
          @pick="(date) => (pickDate = dayjs(date).format('YYYY-MM-DD'))"
        />
      </t-form-item>
      <!-- <t-form-item label="开始采集时间" name="start_time"
        :rules="[
          { required: true, message: '此项必填' },
          { date: { delimiters: ['/', '-', '.'] }, message: '日期格式有误' },
        ]"
      >
        <t-date-picker
          placeholder="请输入时间"
          enable-time-picker
          v-model="formData.start_time"
          :disable-date="{ before: dayjs().subtract(1, 'day').format() }"
          :time-picker-props="timePickerProps"
          @pick="(date) => (pickDate = dayjs(date).format('YYYY-MM-DD'))"
        />
      </t-form-item> -->
    </t-form>
  </t-space>
  </t-dialog>
</template>

<script lang="jsx">
// import { operateChainConn } from '@/api/requestApi';
import dayjs from 'dayjs';
import {
  CHAIN_NAME_OPTIONS,
  TESTPLAN_NAME_OPTIONS,
  AGENT_NAME_OPTIONS,
  SERVICE_NAME_OPTIONS,
} from '@/service/service-detail';


const INITIAL_FORM_DATA = {
  task_name: '',
  testplan_name: '',
  chain_name: '',
  agent_name: '',
  service: '',
  start_time: '',
  finish_time: '',
};
const FORM_RULES = {
  task_name: [{ required: true, message: '请输入任务名称', type: 'error' }],
  testplan_name: [{ required: true, message: '请输入测试计划名称', type: 'error' }],
  chain_name: [{ required: true, message: '请输入链名称', type: 'error' }],
  agent_name: [{ required: true, message: '请输入代理名称', type: 'error' }],
  service: [{ required: true, message: '请输入注册服务', type: 'error' }],
  start_time: [{ required: true, message: '请输入开始采集时间', type: 'error' }],
  finish_time: [{ required: true, message: '请输入结束采集时间', type: 'error' }],
};

export default {
  name: 'AddDialogComp',
  // components: {
  //   Icon,
  // },
  props: {
    showChildDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {    
      CHAIN_NAME_OPTIONS,
      TESTPLAN_NAME_OPTIONS,
      AGENT_NAME_OPTIONS,
      SERVICE_NAME_OPTIONS,
      dayjs,
      layout: 'vertical', // 行内布局
      formData: {...INITIAL_FORM_DATA},
      formRules: {...FORM_RULES},
    };
  },
  
  computed: {
    showDialogAdd: {
      get() {
        return this.showChildDialog
      },
      set(newValue) {
        this.$emit('update:showChildDialog', newValue) // 触发更新事件，父组件的showDialogAdd会自动更新
      }
    },
    timePickerProps() {
      return {
        disableTime: () => {
          if (this.pickDate === dayjs().format('YYYY-MM-DD')) {
            return {
              hour: [0, 1, 2, 3, 4, 5, 6],
            };
          }
          return {};
        },
      };
    },
  },
  // mounted() {
  //   this.formData.node_list = [{ node_name: '', node_ipaddr: '' }];
  //   // this.$refs.formValidatorStatus.validate();
  // },
  methods: {
    // init(data) {
    //   // this.showDialogAdd=true;
    //   // data是父组件弹窗传递过来的值，我们可以打印看看
    //   this.formData = data;
    //   console.log('来自父组件的', data);
    // },

    onConfirm() {
      console.log('formData--->',this.formData)
      const reqParam = {"ids": [''], "param": {}, "op_type": ''};
      reqParam.param = this.formData;
      reqParam.op_type = 1;
      console.log("提交的表单内容", reqParam);
      this.showDialogAdd = false;
    //   operateChainConn(reqParam)
    //     .then((res) => {
    //       if (res.data.code === '000') {
    //         this.$message.success('链连接创建成功');
    //       }
    //     })
    //     .catch((e) => {
    //       this.$message.error('系统异常');
    //       console.log(e);
    //     })
    //     .finally(() => {
    //       this.dataLoading = false;
    //     });
    //   this.formData.node_list = [{ node_name: '', node_ipaddr: '' }];
    //   this.showDialogAdd = false;
    //   // 刷新父页面
    //   this.$emit('addFlush')
    },
  },
  
};
</script>

<style lang="less" scoped>

</style>
